<template>
	<view>
		<!-- 背景图 -->
		<view class="fixbg" :style="{backgroundImage:'url('+imgUrl+')',height:'100vh'}"></view>
		<!-- 导航栏 -->
		<musichead :icon="true" :title="musicDetail.name" color="#fff"></musichead>
		<view class="container" v-show="!islogin">
			<scroll-view scroll-y="true">
				<!-- 网易云音乐标题 -->
				<view class="detail-play">
					<image src='../../static/logo.png' mode=""></image>
					<text>程云风音乐</text>
				</view>
				<!-- 播放与歌曲图片 -->
				<view class="detail-music">
					<!-- 歌曲的图片 -->
					<image :class="{'detail-play-run':isPlay}" :src="imgUrl" mode=""></image>
					<!-- 播放icon -->
					<text class="iconfont" @tap='playMusic' v-show="isPlay">&#xea6d;</text>
					<!-- 暂停icon -->
					<text class="iconfont" @tap='playMusic' v-show="!isPlay">&#xe624;</text>
					<!-- 判断是否是h5 -->
					<!-- #ifdef H5 -->
					<view :style="classNames"></view>
					<!-- #endif -->
					<!-- 判断是否是微信小程序 -->
					<!-- #ifdef MP-WEIXIN -->
					<view style="transform: rotateZ(0deg);"></view>
					<!-- #endif -->
				</view>
				<!-- 歌词列表的显示框 -->
				<view class="detail-lyric">
					<!-- 歌词列表的主体 -->
					<view class="detail-lyric-item-wrap"
						:style="{transform: 'translateY('+ -(lyricIndex+1)*80 +'rpx)'}">
						<!-- 高亮歌词显示 -->
						<view class="detail-lyric-item" :class="{action : index===lyricIndex}"
							v-for="(item,index) in musicLyric" :key=index>
							{{item.lyric}}
						</view>
					</view>
				</view>
				<!-- 喜欢的歌推荐 -->
				<view class="detail-like">
					<view class="detail-like-head">喜欢这首歌的人也听</view>
					<!-- 喜欢歌曲区域的歌曲 -->
					<view class="detail-like-item" v-for="item in musicSimi" :key=item.id
						@tap="likePlay(item.id,item.name)">
						<view class="detail-like-img">
							<!-- 歌曲图片 -->
							<image :src="item.album.blurPicUrl"></image>
						</view>
						<!-- 喜欢歌曲区域的名称 -->
						<view class="detail-like-song">
							<text>{{item.name}}</text>
							<view>
								<!-- sq -->
								<image src="../../static/sq.png" mode=""></image>
								<!-- 歌手与歌名 -->
								<text>{{item.album.artists[0].name}}-{{item.name}}</text>
							</view>

						</view>
						<!-- 播放icon -->
						<text class="iconfont">&#xea6e;</text>
					</view>

				</view>
				<!-- 评论区域 -->
				<view class="detail-comment">
					<view class="detail-comment-head">精彩评论</view>
					<!-- 评论列表 -->
					<view class="detail-comment-item" v-for="(item,index) in musicComment" :key='index'>
						<!-- 用户头像 -->
						<view class="detail-comment-img">
							<image :src="item.user.avatarUrl" mode=""></image>
						</view>
						<!-- 用户名 -->
						<view class="detail-comment-content">
							<view class="detail-comment-name">
								<view>
									<!-- 用户名 -->
									<view class="name">{{item.user.nickname}}</view>
									<!-- 评论事件 -->
									<view class="time">{{1634912863226}}</view>
								</view>
								<!-- 点赞icon -->
								<view class="iconfont">673&#xec7f;</view>
							</view>
							<!-- 评论内容 -->
							<view class="pl">{{item.content}}</view>
						</view>
					</view>

				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	// 引入导航栏
	import musichead from '../../components/musichead/musichead'
	// import {} from 'vuex'
	// 获取歌词 /lyric?id=33894312
	// 歌曲详情 /song/detail?ids=347230
	// 歌曲url地址 /song/url?id=33894312
	// 相似歌曲  /simi/song?id=347230
	// 歌曲评论 /comment/music?id=186016&limit=1
	export default {
		// 注册导航栏
		components: {
			musichead
		},
		data() {
			return {
				// 判断是否为播放
				isPlay: false,
				classNames: '',
				// 歌曲地址
				musicUrl: '',
				// 歌曲评论
				musicComment: [],
				// 歌词
				musicLyric: '',
				// 相似歌曲
				musicSimi: '',
				// 歌曲详情
				musicDetail: '',
				// 歌曲图片
				imgUrl: '',
				// 获取背景播放的api
				bgAudioManager: uni.getBackgroundAudioManager(),
				// 获取播放的api
				innerAudioContext: uni.createInnerAudioContext(),
				// 获取定时器
				timer: '',
				// 歌词的index
				lyricIndex: 0,
				islogin: true,
				indexs: 0,
				isxvhuan: true
			}
		},
		methods: {
			// 点击播放或者暂停
			playMusic() {
				// 取反
				this.isPlay = !this.isPlay
				this.bofang()
			},
			bofang() {
				// 当为暂停时
				if (!this.isPlay) {
					// 取消定时器
					clearInterval(this.timer)
					// 获取暂停时指针的位置
					this.classNames = {
						'transform': 'rotateZ(-25deg)',
						'transformOrigin': '40% 0'
					}
					// 是否为小程序
					// #ifdef MP-WEIXIN
					// 取消定时器
					clearInterval(this.timer)
					// 暂停
					this.bgAudioManager.pause()
					// #endif
					// 是否为h5页面
					// #ifdef H5
					// 暂停
					this.innerAudioContext.pause()
					// #endif
				} else {
					// 播放时的指针的样式
					this.classNames = {
						'transform': 'rotateZ(0deg)',
						'transformOrigin': '40% 0',
					}
					// 是否为微信小程序
					// #ifdef MP-WEIXIN
					// 获取歌曲名称
					this.bgAudioManager.title = this.musicDetail.name
					// 获取歌曲url
					this.bgAudioManager.src = this.musicUrl
					// 调用listLyricIndex()歌词滚动方法
					this.listLyricIndex()
					this.bgAudioManager.onEnded(() => {
						this.$nextTick(async () => {
							clearInterval(this.timer)
							this.getmusicxx(this.$store.state.nextId)
							// 获取歌曲url
							const {
								data: url
							} = await this.$http({
								url: '/song/url?id=' + this.$store.state.nextId
							})
							// 将歌曲url赋值给this.musicUrl
							this.musicUrl = url.data[0].url
							this.isPlay = false
							this.playMusic()
							this.$store.commit('INIT_NEXTID', this.$store.state.nextId)
						})
					})
					// #endif
					// 是否时h5
					// #ifdef H5
					// 播放
					this.innerAudioContext.autoplay = true
					// 获取url
					this.innerAudioContext.src = this.musicUrl
					// 调用歌词滚动方法
					this.listLyricIndex()
					this.innerAudioContext.onEnded(async () => {
						clearInterval(this.timer)
						this.getmusicxx(this.$store.state.nextId)
						// 获取歌曲url
						const {
							data: url
						} = await this.$http({
							url: '/song/url?id=' + this.$store.state.nextId
						})
						// 将歌曲url赋值给this.musicUrl
						this.musicUrl = url.data[0].url
						this.isPlay = false
						this.playMusic()
						this.$store.commit('INIT_NEXTID', this.$store.state.nextId)
					})
					// #endif
				}
			},

			// 歌词实现秒的方法
			formatTimeToSec(value) {
				// 利用split将歌词时间分成2份
				let arr = value.split(':')
				// 转换成为分
				return parseInt(arr[0] * 60) + (arr[1] - 0)
			},
			// 歌词滚动的方法
			listLyricIndex() {
				this.indexs = this.musicLyric.length * 40 / this.musicLyric.length
				// 取消定时器
				clearInterval(this.timer)
				// 微信小程序时
				// #ifdef MP-WEIXIN
				// 使用定时器
				this.timer = setInterval(() => {
					let i = 0
					// 遍历出所有歌词的时间及index
					for (i; i < this.musicLyric.length; i++) {
						// 判断是否超出歌词
						if (this.bgAudioManager.currentTime > this.musicLyric[this.musicLyric.length - 1].time) {
							// 超出则复制给this.lyricIndex
							this.lyricIndex = this.musicLyric.length - 1
							// 跳出
							break
						}
						// 判断此时歌词的 位置
						if (this.bgAudioManager.currentTime > this.musicLyric[i].time && this.bgAudioManager
							.currentTime < this.musicLyric[i + 1].time && this.musicLyric[i].lyric !== '') {
							// 将获取到的index复制给this.lyricIndex
							this.lyricIndex = i
						}
					}
				}, 1500)
				// #endif
				// h5页面如下 方法用的跟微信小程序时一样的
				// #ifdef H5
				this.timer = setInterval(() => {
					for (let i = 0; i < this.musicLyric.length; i++) {
						if (this.innerAudioContext.currentTime > this.musicLyric[this.musicLyric.length - 1]
							.time) {
							this.lyricIndex = this.musicLyric.length - 1
							break
						}
						if (this.innerAudioContext.currentTime > this.musicLyric[i].time && this.innerAudioContext
							.currentTime < this.musicLyric[i + 1].time) {

							this.lyricIndex = i
						}
					}
				}, 1000)
				// #endif
			},
			async likePlay(id) {
				// 获取歌曲url
				clearInterval(this.timer)
				this.getmusicxx(id)
				// #ifdef MP-WEIXIN
				const {
					data: url
				} = await this.$http({
					url: '/song/url?id=' + id
				})
				// 将歌曲url赋值给this.musicUrl
				this.musicUrl = url.data[0].url
				this.isPlay = false
				this.playMusic()
				// #endif
				// #ifdef H5
				this.innerAudioContext.destroy()
				// 获取歌曲url
				const {
					data: url
				} = await this.$http({
					url: '/song/url?id=' + id
				})
				// 将歌曲url赋值给this.musicUrl
				this.musicUrl = url.data[0].url
				this.isPlay = false
				this.playMusic()
				// #endif
			},
			async getmusicxx(id) {
				// this.$store.commit('INIT_NEXTID', id)
				uni.showLoading({
					title: '加载中...'
				})
				this.islogin = true
				// 获取歌曲url
				const {
					data: url
				} = await this.$http({
					url: '/song/url?id=' + id
				})
				// 将歌曲url赋值给this.musicUrl
				this.musicUrl = url.data[0].url
				// 获取歌曲评论
				const {
					data: comment
				} = await this.$http({
					url: '/comment/music?id=' + id
				})
				// 将歌曲评论赋值给this.musicComment
				this.musicComment = comment.comments
				// // 获取歌词
				const {
					data: lyric
				} = await this.$http({
					url: '/lyric?id=' + id
				})
				// 将歌词赋值给this.musicLyric
				this.musicLyric = lyric.lrc.lyric
				// 利用正则将获取到的歌词进行拆分
				let re = /\[([^\]]+)\]([^\[]+)/g
				// 定义接收拆分歌词到的对象数组
				let result = []
				// 利用replace方法获取到拆分到的2位
				this.musicLyric.replace(re, (a, b, c) => {
					result.push({
						// 时间
						time: this.formatTimeToSec(b),
						// 歌词
						lyric: c
					})
				})
				// 将获取到的整理好的歌词赋值给this.musicLyric
				this.musicLyric = result
				// // 获取相似歌曲
				const {
					data: simi
				} = await this.$http({
					url: '/simi/song?id=' + id
				})
				// 将相似歌曲赋值给this.musicSimi
				this.musicSimi = simi.songs
				// // 获取歌曲详情
				const {
					data: detail
				} = await this.$http({
					url: '/song/detail?ids=' + id
				})
				// 歌曲详情
				this.musicDetail = detail.songs[0]
				// 图片url
				this.imgUrl = detail.songs[0].al.picUrl
				this.islogin = false
				uni.hideLoading()
			}
		},
		onLoad(option) {
			this.getmusicxx(option.id)
			this.$store.commit('INIT_NEXTID', option.id)
			console.log(option.id, this.$store.state.nextId);
			
		},
		onHide() {
			clearInterval(this.timer)
			// #ifdef H5
			this.innerAudioContext.destroy()
			// #endif
		},
		onUnload() {
			clearInterval(this.timer)
			// #ifdef H5
			this.innerAudioContext.destroy()
			// #endif
		}
	}
</script>

<style scoped lang="less">
	.detail-play {
		width: 100%;
		height: 55rpx;
		display: flex;
		align-items: center;
		margin: 28rpx;

		image {
			width: 50rpx;
			height: 50rpx;
			border-radius: 50%;
			margin-right: 10rpx;
		}

		text {
			color: #fff;
		}
	}

	.detail-music {
		position: relative;
		width: 580rpx;
		height: 580rpx;
		background-image: url(../../static/disc.png);
		background-size: 100% 100%;
		margin: 124rpx auto;

		image {
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			width: 370rpx;
			height: 370rpx;
			border-radius: 50%;
			animation: 10s linear move infinite;
			animation-play-state: paused;
		}

		.detail-play-run {
			animation-play-state: running;
		}

		text {
			position: absolute;
			color: #fff;
			font-size: 100rpx;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}

		view {
			width: 215rpx;
			height: 340rpx;
			background-image: url(../../static/needle.png);
			background-size: cover;
			position: absolute;
			left: 134rpx;
			right: 0;
			margin: auto;
			top: -180rpx;
			transition: all .5s;
			transform: rotateZ(-25deg);
			transform-origin: 40% 0;

		}
	}

	.detail-lyric {
		width: 100%;
		overflow: hidden;
		height: 255rpx;
		padding-top: 90rpx;

		.detail-lyric-item-wrap {
			transition: .5s;

			.detail-lyric-item {
				width: 100%;
				text-align: center;
				color: #5b5c61;
				height: 82rpx;
			}

			.action {
				color: #fff;
			}
		}
	}

	.detail-like {
		width: 100%;
		margin: 28rpx;
		margin-top: 40rpx;

		.detail-like-head {
			font-size: 32rpx;
			color: #fff;
			margin-bottom: 40rpx;
		}

		.detail-like-item {
			display: flex;
			width: 100%;
			position: relative;
			margin-top: 28rpx;

			.detail-like-img {
				width: 85rpx;
				height: 85rpx;
				border-radius: 15rpx;
				overflow: hidden;
				margin-right: 20rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.detail-like-song {
				color: #fff;

				image {
					width: 26rpx;
					height: 16rpx;
					margin-right: 10rpx;
				}

				view {
					text {
						color: #b2b4b8;
						font-size: 26rpx;
					}
				}
			}
		}

		.iconfont {
			position: absolute;
			right: 80rpx;
			color: #46474d;
			font-size: 60rpx;
		}
	}

	.detail-comment {
		width: 100%;
		margin: 28rpx;
		margin-top: 40rpx;

		.detail-comment-head {
			font-size: 32rpx;
			color: #fff;
			margin-bottom: 40rpx;
		}

		.detail-comment-item {
			display: flex;
			justify-content: space-between;
			margin-bottom: 40rpx;

			.detail-comment-img {
				width: 65rpx;
				height: 65rpx;
				border-radius: 50%;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.detail-comment-content {
				flex: 1;
				display: flex;
				flex-flow: column;

				.detail-comment-name {
					display: flex;
					position: relative;
					margin-left: 20rpx;

					.name {
						font-size: 26rpx;
						color: #9a9ba2;
					}

					.time {
						font-size: 24rpx;
						color: #46474c;
					}

					.iconfont {
						position: absolute;
						right: 64rpx;
						color: #46474c;
					}
				}

				.pl {
					width: 600rpx;
					margin-left: 20rpx;
					color: #fff;
					padding-bottom: 30rpx;
					line-height: 40rpx;
					font-size: 28rpx;
					margin-top: 20rpx;
					border-bottom: 1px solid #66686c;
				}

			}
		}
	}

	@keyframes move {
		from {
			transform: rotateZ(0deg);
		}

		to {
			transform: rotateZ(360deg);
		}
	}
</style>
